<script lang="ts" setup>
import { ref } from 'vue'
import DepartmentService from '@/api/department'
import { ListToTree } from '@/utils/listToTree'

defineProps({
  modelValue: {
    type: Number,
    default: null
  }
})
const emit = defineEmits(['update:modelValue'])
const treeData = ref([] as any)
const props = {
  label: 'name',
  value: 'id'
}
const getDepartment = async () => {
  const res: any = await DepartmentService.getDepartmentService()
  treeData.value = ListToTree(res, 0)
}
getDepartment()

const changValue = (cascaderValue: any) => {
  console.log(cascaderValue)
  if (cascaderValue.length > 0) {
    emit('update:modelValue', cascaderValue[cascaderValue.length - 1])
  } else {
    emit('update:modelValue', null)
  }
}
</script>

<template>
  <!-- 级联组件 -->
  <el-cascader
    :modelValue="modelValue"
    @update:modelValue="changValue"
    :options="treeData"
    :props="props"
    separator="-"
    size="small"
  />
</template>
